<template>
    <div class="video-list" v-loading="loading">
        <div class="input-box">
            <el-input
                placeholder="关键字"
                style="width:150px;"
                @keyup.enter.native="getList(1)"
                clearable
                v-model.trim="boName">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-date-picker
                @change="getList(1)"
                v-model="date"
                style="margin-left:10px;"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-select
                @change="getList(1)"
                style="margin-left:10px;width:100px;"
                v-model="collectSource">
                <el-option label="全部" :value="2"></el-option>
                <el-option label="微博" :value="0"></el-option>
                <el-option label="taptap" :value="1"></el-option>
            </el-select>
            <el-select
                @change="getList(1)"
                style="margin-left:10px;width:100px;"
                v-model="status">
                <el-option label="全部" :value="2"></el-option>
                <el-option label="运行" :value="0"></el-option>
                <el-option label="暂停" :value="1"></el-option>
            </el-select>
            <el-button type="primary" class="btn" @click="getList(1)">搜索</el-button>
            <el-button type="success" class="btn" @click="addRules">新建</el-button>
        </div>
        <div class="table-box">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    fixed
                    width="50"
                    prop="id"
                    label="id">
                </el-table-column>
                <el-table-column
                    prop="collectSource"
                    width="70"
                    label="采集源">
                    <template slot-scope="scope">
                        <span v-if="scope.row.collectSource === 1">taptap</span>
                        <span v-else>微博</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="120"
                    label="采集对象">
                    <template slot-scope="scope">
                        <span>{{scope.row.boZhuName || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="120"
                    label="作者信息">
                    <template slot-scope="scope">
                        <span>{{scope.row.boZhuName || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="collectUrl"
                    label="平台ID/地址">
                </el-table-column>
                <el-table-column
                    width="100"
                    label="采集规则">
                    <template slot-scope="scope">
                        <el-popover
                            placement="right"
                            width="260"
                            popper-class="popover-box"
                            trigger="hover">
                            <div class="popover-table">
                                <div class="popover-title">
                                    <div>名称</div>
                                    <div>条件</div>
                                </div>
                                <div class="popover-content" v-if="scope.row.collectRule.official || scope.row.collectRule.user">
                                    <div>渠道</div>
                                    <div>
                                        <span v-if="scope.row.collectRule.official">官方</span>
                                        <span style="margin-left:10px;" v-if="scope.row.collectRule.user">用户</span>
                                    </div>
                                </div>
                                <div class="popover-content" v-if="scope.row.collectRule.playCount">
                                    <div>播放数</div>
                                    <div>{{scope.row.collectRule.playCountLimit}}{{scope.row.collectRule.playCount}}</div>
                                </div>
                                <div class="popover-content" v-if="scope.row.collectRule.zanCount">
                                    <div>点赞数</div>
                                    <div>{{scope.row.collectRule.zanCountLimit}}{{scope.row.collectRule.zanCount}}</div>
                                </div>
                                <div class="popover-content" v-if="scope.row.collectRule.commentCount">
                                    <div>点评数</div>
                                    <div>{{scope.row.collectRule.commentCountLimit}}{{scope.row.collectRule.commentCount}}</div>
                                </div>
                                <div class="popover-content" v-if="scope.row.collectRule.relayCount">
                                    <div>转发数</div>
                                    <div>{{scope.row.collectRule.relayCountLimit}}{{scope.row.collectRule.relayCount}}</div>
                                </div>
                                <div class="popover-content" v-if="scope.row.collectRule.videoTime">
                                    <div>视频时长</div>
                                    <div>{{scope.row.collectRule.videoTimeLimit}}{{scope.row.collectRule.videoTime}} 秒</div>
                                </div>
                                <div class="popover-content" v-if="scope.row.collectRule.day">
                                    <div>首次抓取时间</div>
                                    <div>{{scope.row.collectRule.day}}天</div>
                                </div>
                                <div class="popover-content" v-if="scope.row.collectRule.updateDay">
                                    <div>更新周期</div>
                                    <div>{{scope.row.collectRule.updateDay}}</div>
                                </div>
                                <!-- <div class="popover-content"><div>没有规则</div></div> -->
                            </div>
                            <el-button type="text" size="small" slot="reference">查看采集规则</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                    width="70"
                    label="采集量">
                    <template slot-scope="scope">
                        <div style="text-align:center;">{{scope.row.videoCount || 0}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="gameName"
                    width="80"
                    label="采集状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === '0'">已上架</span>
                        <span v-else style="color: #F56C6C;">已暂停</span>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    width="70"
                    label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status === '0'"><el-button @click="changeSatus(scope.row, '1')" type="text" size="small" style="color:#F56C6C;">暂停</el-button></div>
                        <div v-else><el-button @click="changeSatus(scope.row, '0')" type="text" size="small" style="color:#67C23A;">开始</el-button></div>
                        <div><el-button @click="editRules(scope.row)" type="text" size="small">编辑</el-button></div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <!-- 编辑窗口 -->
        <el-dialog
            :title="title"
            :visible.sync="showEdit"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            top="30px"
            class="editor-dialog"
            width="550px">
            <el-form
                ref="form"
                :rules="rules"
                :model="currentItem"
                class="input-no-border-box"
                :hide-required-asterisk="true"
                label-width="80px">
                <topTitle title="基本信息"/>
                <el-form-item label="采集源">
                    <el-select
                        v-model="currentItem.collectSource">
                        <el-option label="taptap" value="1"></el-option>
                        <el-option label="微博" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="采集对象" prop="boZhuName">
                    <el-input v-model="currentItem.boZhuName" placeholder="用户/游戏ID"></el-input>
                </el-form-item>
                <el-form-item label="平台链接" prop="collectUrl">
                    <el-input v-model="currentItem.collectUrl" placeholder="请输入平台链接"></el-input>
                </el-form-item>
                <el-form-item label="作者信息" prop="userId">
                    <el-select
                        v-model="currentItem.userId">
                        <el-option :label="item.userName" :value="item.id" v-for="(item, index) in userList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="currentItem.status">
                        <el-radio label="0">运行</el-radio>
                        <el-radio label="1">暂停</el-radio>
                    </el-radio-group>
                </el-form-item>

                <topTitle title="采集规则"/>
                <el-checkbox v-model="currentItem.collectRule.official" @change="officialChange">官方</el-checkbox>
                <el-checkbox v-model="currentItem.collectRule.user" @change="userChange">用户</el-checkbox>
                <el-form-item label="播放数" prop="collectRule.playCount">
                    <el-select
                        style="width: 70px;"
                        size="mini"
                        v-model="currentItem.collectRule.playCountLimit">
                        <el-option label=">=" value=">="></el-option>
                        <el-option label="<=" value="<="></el-option>
                    </el-select>
                    <el-input v-model.number="currentItem.collectRule.playCount" type="number" style="width:150px; margin-left:10px;"></el-input>
                </el-form-item>
                <el-form-item label="点赞数" prop="collectRule.zanCount">
                    <el-select
                        style="width: 70px;"
                        size="mini"
                        v-model="currentItem.collectRule.zanCountLimit">
                        <el-option label=">=" value=">="></el-option>
                        <el-option label="<=" value="<="></el-option>
                    </el-select>
                    <el-input v-model.number="currentItem.collectRule.zanCount" type="number" style="width:150px; margin-left:10px;"></el-input>
                </el-form-item>
                <el-form-item label="点评数" prop="collectRule.commentCount">
                    <el-select
                        style="width: 70px;"
                        size="mini"
                        v-model="currentItem.collectRule.commentCountLimit">
                        <el-option label=">=" value=">="></el-option>
                        <el-option label="<=" value="<="></el-option>
                    </el-select>
                    <el-input v-model.number="currentItem.collectRule.commentCount" type="number" style="width:150px; margin-left:10px;"></el-input>
                </el-form-item>
                <el-form-item label="转发数" prop="collectRule.relayCount">
                    <el-select
                        style="width: 70px;"
                        size="mini"
                        v-model="currentItem.collectRule.relayCountLimit">
                        <el-option label=">=" value=">="></el-option>
                        <el-option label="<=" value="<="></el-option>
                    </el-select>
                    <el-input v-model.number="currentItem.collectRule.relayCount" type="number" style="width:150px; margin-left:10px;"></el-input>
                </el-form-item>
                <el-form-item label="视频时长" prop="collectRule.videoTime">
                    <el-select
                        style="width: 70px;"
                        size="mini"
                        v-model="currentItem.collectRule.videoTimeLimit">
                        <el-option label=">=" value=">="></el-option>
                        <el-option label="<=" value="<="></el-option>
                    </el-select>
                    <el-input v-model.number="currentItem.collectRule.videoTime" type="number" style="width:150px; margin-left:10px;"></el-input>
                    <span>秒</span>
                </el-form-item>
                <el-form-item label="首次抓取" prop="collectRule.day">
                    <el-input v-model.number="currentItem.collectRule.day" type="number" style="width:230px;"></el-input>
                    <span>天</span>
                </el-form-item>
                <el-form-item label="更新周期" prop="collectRule.updateDay">
                    <el-input v-model.number="currentItem.collectRule.updateDay" type="number" style="width:230px;"></el-input>
                </el-form-item>

                <topTitle title="补充条件"/>
                <el-checkbox v-model="currentItem.noCollectGame">忽略未采集的游戏</el-checkbox>
                <el-checkbox v-model="currentItem.noCollectVideo">忽略已采集的视频</el-checkbox>
            </el-form>
            <span slot="footer">
                <el-button @click="noEdit">取 消</el-button>
                <el-button type="primary" @click="createNewRules">{{title === '编辑采集规则' ? '保 存' : '新 建'}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            boName: '', // 关键字
            collectSource: 2, // 采集源 0为微博 1为taptap
            status: 2, // 任务状态 0为运行 1为暂停
            date: [],
            tableData: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            loading: false,
            dialogVisible: false,
            title: '',
            showEdit: false,
            currentItem: {
                collectSource: '0', // 采集源 0为微博 1为taptap
                collectUrl: '', // 平台链接
                boZhuName: '', // 采集对象
                userId: '', // 作者信息
                status: '0', // 状态 0为运行 1为暂停
                collectRule: {
                    official: true, // 是否需要官方
                    user: true, // 是否需要用户
                    playCount: '', // 采集规则显示 例如：播放数>=200,点赞数>=300
                    playCountLimit: '<=', // 播放量限制
                    zanCount: '', // 点赞数
                    zanCountLimit: '<=', // 点赞数限制
                    commentCount: '', // 点评数
                    commentCountLimit: '<=', // 点评数限制
                    relayCount: '', // 转发数
                    relayCountLimit: '<=', // 转发数限制
                    videoTime: '', // 视频时长
                    videoTimeLimit: '<=', // 视频时长限制 单位秒
                    day: '', // 首次抓取时间 单位天
                    updateDay: '' // 更新周期
                },
                noCollectGame: false, // 忽略未采集的游戏
                noCollectVideo: false // 忽略已采集的视频
            },
            rules: {
                collectUrl: [
                    { required: true, message: '请输入平台链接', trigger: 'blur' }
                ],
                userId: [
                    { required: true, message: '请选择作者', trigger: 'change' }
                ]
                // 'collectRule.playCount': [
                //     { required: true, message: '请输入播放数', trigger: 'blur' }
                // ],
                // 'collectRule.zanCount': [
                //     { required: true, message: '请输入点赞数', trigger: 'blur' }
                // ],
                // 'collectRule.commentCount': [
                //     { required: true, message: '请输入点评数', trigger: 'blur' }
                // ],
                // 'collectRule.relayCount': [
                //     { required: true, message: '请输入转发数', trigger: 'blur' }
                // ],
                // 'collectRule.videoTime': [
                //     { required: true, message: '请输入视频时长', trigger: 'blur' }
                // ],
                // 'collectRule.day': [
                //     { required: true, message: '请输入首次抓取', trigger: 'blur' }
                // ],
                // 'collectRule.updateDay': [
                //     { required: true, message: '请输入更新周期', trigger: 'blur' }
                // ]
            },
            userList: []
        }
    },

    created () {
        this.getList(this.pageNum)
        this.selectGameUser()
    },
    methods: {
        // 获取列表
        async getList (pageNum) {
            this.loading = true
            this.pageNum = pageNum
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
            if (this.date && this.date.length) {
                params.fromDate = this.date[0]
                params.toDate = this.date[1]
            }
            if (this.boName) {
                params.boName = this.boName
            }
            // 采集源 0为微博 1为taptap
            if (this.collectSource !== 2) {
                params.collectSource = this.collectSource
            }
            // 任务状态 0为运行 1为暂停
            if (this.status !== 2) {
                params.status = this.status
            }
            let res = await this.$http.get('/spider/selectRule', { params: params })
            if (res.code === '0') {
                this.tableData = res.data
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },

        async selectGameUser () {
            let res = await this.$http.get('/spider/selectGameUser')
            if (res.code === '0') {
                this.userList = res.data
            }
        },

        // 页码切换
        sizeChange (val) {
            this.pageSize = val
            this.getList(1)
        },

        // 页容切换
        pageChange (val) {
            this.pageNum = val
            this.getList(this.pageNum)
        },

        officialChange (val) {
            if (!val) {
                this.currentItem.collectRule.user = true
            }
        },

        userChange (val) {
            if (!val) {
                this.currentItem.collectRule.official = true
            }
        },

        _formatDate (timestamp, type = 'YYYY-MM-DD HH:MM') {
            // return timestamp
            return formatDate(timestamp, type)
        },

        // 新建采集
        addRules () {
            this.title = '新建采集规则'
            this.resetRules()
            this.showEdit = true
        },

        resetRules () {
            this.currentItem = {
                collectSource: '0', // 采集源 0为微博 1为taptap
                boZhuName: '', // 采集对象
                collectUrl: '', // 平台链接
                userId: '', // 作者信息
                status: '0', // 状态 0为运行 1为暂停
                collectRule: {
                    official: true, // 是否需要官方
                    user: true, // 是否需要用户
                    playCount: '', // 采集规则显示 例如：播放数>=200,点赞数>=300
                    playCountLimit: '<=', // 播放量限制
                    zanCount: '', // 点赞数
                    zanCountLimit: '<=', // 点赞数限制
                    commentCount: '', // 点评数
                    commentCountLimit: '<=', // 点评数限制
                    relayCount: '', // 转发数
                    relayCountLimit: '<=', // 转发数限制
                    videoTime: '', // 视频时长
                    videoTimeLimit: '<=', // 视频时长限制 单位秒
                    day: '', // 首次抓取时间 单位天
                    updateDay: '' // 更新周期
                },
                noCollectGame: false, // 忽略未采集的游戏
                noCollectVideo: false // 忽略已采集的视频
            }
        },

        // 编辑采集
        editRules (item) {
            if (!item.collectRule.playCountLimit) {
                item.collectRule.playCountLimit = '>='
            }
            if (!item.collectRule.zanCountLimit) {
                item.collectRule.zanCountLimit = '>='
            }
            if (!item.collectRule.commentCountLimit) {
                item.collectRule.commentCountLimit = '>='
            }
            if (!item.collectRule.relayCountLimit) {
                item.collectRule.relayCountLimit = '>='
            }
            if (!item.collectRule.videoTimeLimit) {
                item.collectRule.videoTimeLimit = '>='
            }

            this.currentItem = item
            this.title = '编辑采集规则'
            this.showEdit = true
        },

        createNewRules () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.title === '编辑采集规则') {
                        this.updateRule()
                    } else {
                        this.videoRule()
                    }
                    this.showEdit = false
                } else {
                    return false
                }
            })
        },

        async videoRule () {
            let res = await this.$http.post('/spider/videoRule', this.currentItem)
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '建立成功'
                })
                this.loading = true
                setTimeout(() => {
                    this.getList(1)
                }, 1000)
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        async updateRule () {
            let res = await this.$http.post('/spider/updateRule', this.currentItem)
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        changeSatus (item, status) {
            item.status = status
            this.currentItem = item
            this.updateRule()
        },

        noEdit () {
            this.showEdit = false
        }
    }
}
</script>

<style lang="scss" scoped>
    .video-list {
        .input-box {
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin: 20px 0;
        }
        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
    .editor-dialog {
        /deep/ .el-dialog__body {
            padding: 0 20px;
        }
    }
    .popover-table {
        border: 1px solid #ebeef5;
        border-right: none;
        .popover-title {
            display: flex;
            align-items: center;
            font-weight: 500;
            > div {
                border-right: 1px solid #ebeef5;
                padding: 5px;
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .popover-content {
            border-top: 1px solid #ebeef5;
            display: flex;
            align-items: center;
            > div {
                border-right: 1px solid #ebeef5;
                padding: 5px;
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
</style>

<style lang="scss">
    .popover-box {
        padding: 8px;
    }
</style>
